<form id="config-form" class="edit-form form-horizontal" role="form" data-toggle="validator" method="POST" action="">

  <div class="panel panel-default panel-intro">
    <div class="panel-heading">
      <ul class="nav nav-tabs nav-group">
        <li class="active"><a href="#alioss" data-toggle="tab">阿里云OSS</a></li>
        <li><a href="#qiniu" data-toggle="tab">七牛云OSS</a></li>
      </ul>
    </div>

    <div class="panel-body">
      <div id="myTabContent" class="tab-content">
        {foreach $addon.config as $item}
        {if $item.name=='alioss'}
        <div class="tab-pane fade active in" id="alioss">
          <table class="table table-striped table-config">
            <tbody>
            <tr>
              <td>状态</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    {:Form::radios('row[alioss][status]',['normal'=>'正常','hidden'=>'禁用'],$item.value.status??'normal')}
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td width="15%">AccessKeyId</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    <input type="text" name="row[alioss][accessKeyId]" value="{$item.value.accessKeyId|default=''}" class="form-control" data-rule="" data-tip="阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。"/>
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td>AccessKeySecret</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    <input type="text" name="row[alioss][accessKeySecret]" value="{$item.value.accessKeySecret|default=''}" class="form-control" data-rule="" data-tip="公众号支付必须"/>
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td>存储空间</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    <input type="text" name="row[alioss][bucket]" value="{$item.value.bucket|default=''}" class="form-control" data-rule="" data-tip="仅在需要获取Openid时使用，一般情况下为空"/>
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td>访问域名</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    <input type="text" name="row[alioss][endpoint]" value="{$item.value.endpoint|default=''}" class="form-control" data-rule="" data-tip="Endpoint 表示OSS对外服务的访问域名。OSS以HTTP RESTful API的形式对外提供服务，当访问不同地域的时候，需要不同的域名。通过内网和外网访问同一个地域所需要的域名也是不同的"/>
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td>区域</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    <input type="text" name="row[alioss][region]" value="{$item.value.region|default=''}" class="form-control" data-rule="" data-tip=""/>
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>

            </tbody>
          </table>
        </div>
        {elseif $item.name=='qiniu'}
        <div class="tab-pane fade" id="qiniu">
          <table class="table table-striped table-config">
            <tbody>
            <tr>
              <td>状态</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    {:Form::radios('row[qiniu][status]',['normal'=>'正常','hidden'=>'禁用'],$item.value.status??'normal')}
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td width="15%">AccessKeyId</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    <input type="text" name="row[qiniu][accessKeyId]" value="{$item.value.accessKeyId|default=''}" class="form-control" data-rule="" data-tip="阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。"/>
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td>AccessKeySecret</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    <input type="text" name="row[qiniu][accessKeySecret]" value="{$item.value.accessKeySecret|default=''}" class="form-control" data-rule="" data-tip="公众号支付必须"/>
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td>存储空间</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    <input type="text" name="row[qiniu][bucket]" value="{$item.value.bucket|default=''}" class="form-control" data-rule="" data-tip="仅在需要获取Openid时使用，一般情况下为空"/>
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td>访问域名</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    <input type="text" name="row[qiniu][endpoint]" value="{$item.value.endpoint|default=''}" class="form-control" data-rule="" data-tip="Endpoint 表示OSS对外服务的访问域名。OSS以HTTP RESTful API的形式对外提供服务，当访问不同地域的时候，需要不同的域名。通过内网和外网访问同一个地域所需要的域名也是不同的"/>
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td>区域</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    <input type="text" name="row[qiniu][region]" value="{$item.value.region|default=''}" class="form-control" data-rule="" data-tip=""/>
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            <tr>
              <td>链接有效期</td>
              <td>
                <div class="row">
                  <div class="col-sm-8 col-xs-12">
                    <input type="text" name="row[qiniu][expiration]" value="{$item.value.expiration|default=''}" class="form-control" data-rule="" data-tip=""/>
                  </div>
                  <div class="col-sm-4"></div>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        {/if}
        {/foreach}
        <div class="form-group layer-footer">
          <label class="control-label col-xs-12 col-sm-2"></label>
          <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
<script>
  document.querySelectorAll("input[name='row[wechat][mode]']").forEach(function (i, j) {
    i.addEventListener("click", function () {
      document.querySelectorAll("#wechat table tr[data-type]").forEach(function (m, n) {
        m.classList.add("hidden");
      });
      document.querySelectorAll("#wechat table tr[data-type='" + this.value + "']").forEach(function (m, n) {
        m.classList.remove("hidden");
      });
    });
  });
</script>
